<template>
    <div style="padding-top: 50px; width: 100vw;">
        <nav-bar>
            <!-- 具名插槽 -->
            <template #left>
                <div class="lefts">
                    <van-icon name="arrow-left" @click="$router.go(-1)"></van-icon>
                </div>
            </template>
            <template #center>
                <div>
                    搜索
                </div>
            </template>
        </nav-bar>
        <div>
            <div class="mysearch">
                <input type="search" v-model="keywords" class="search" placeholder="请输入小区/写字楼/学校等">
                <div class="btn" @click="search">
                    搜索
                </div>
            </div>
             <div class="content">
            <div v-for="(item, index) in list" :key="index" class="address" @click="goAddress(item.name,item.geohash)">
                <div class="name">
                    {{ item.name }}
                </div>
                <div class="address_item">
                    {{ item.address }}
                </div>
            </div>
            <!-- <div v-show="isShow" style="padding: 10px; font-size: 14px; color: #666;">
                很抱歉！无搜索结果
            </div> -->
        </div>
        </div>
    </div>
</template>
<script>
import { searchOrderAdress } from '@/api/city'
export default {
    data() {
        return {
            list:[],
            keywords:""
        }
    },
   
    methods: {
      async search(){
           let data = {
            type:"nearby",
            keyword:this.keywords
           }
            let res = await searchOrderAdress(data);
            console.log(res) 
            this.list = res.data;
        },
        goAddress(name,geohash){
             let obj = {
                name,
                geohash
             }
             this.$store.commit("changeCity",obj)
             this.$router.go(-1)
        }
    },
}
</script>
<style lang="less" scoped>
.mysearch{
    padding: 15px;
    height: 35px;
    display: flex;
    justify-content: space-between;
    .search{
        height: 35px;
        width: 75%;
        background: #f1f1f1;
        border: none;
        border-radius: 5px;
        padding: 0 5px;
        font-size: 13px;
    }
    .btn{
        width: 20%;
        height: 35px;
        text-align: center;
        line-height: 35px;
        background: #3190e8;
        font-size: 13px;
        color: #fff;
        border-radius: 5px;
    }
}

    .content {

        background: #fff;
        font-size: 15px;
        margin-top: 10px;
        .address {
            padding: 15px 20px;
            border-top: 1px solid #e4e4e4;

            .name {
                color: #333;
                font-size: 16px;
            }

            .address_item {
                color: #b4b4b4;
                font-size: 14px;
                margin-top: 10px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

</style>